<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();
const props = defineProps({
  article: {
    type: Object,
    required: true
  }
});
window.console.log(props.article,11111);

const goToDetail = () => {
  router.push({
    name: 'ArticleDetail',
    params: { id: props.article.id }
  });
};
</script>

<template>
  <div class="article-card" @click="goToDetail">
    <div class="article-cover">
      <img :src="article.cover" :alt="article.title">
    </div>
    <div class="article-content">
      <h3 class="article-title">{{ article.title }}</h3>
      <div class="article-meta">
        <span class="meta-item">{{ article.date }}</span>
        <span class="meta-item">{{ article.author }}</span>
        <span class="meta-item">{{ article.category }}</span>
      </div>
      <div class="article-stats">
        <span class="stat-item">{{ article.views }} 浏览</span>
        <span class="stat-item">{{ article.likes }} 喜欢</span>
        <span class="stat-item">{{ article.comments }} 评论</span>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.article-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s;

  &:hover {
    transform: translateY(-5px);
  }

  .article-cover {
    height: 200px;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .article-content {
    padding: 1.5rem;

    .article-title {
      font-size: 1.2rem;
      color: #333;
      margin-bottom: 1rem;
    }

    .article-meta {
      display: flex;
      gap: 1rem;
      margin-bottom: 1rem;
      
      .meta-item {
        color: #999;
        font-size: 0.9rem;
      }
    }

    .article-stats {
      display: flex;
      gap: 1rem;
      
      .stat-item {
        color: #999;
        font-size: 0.9rem;
      }
    }
  }
}
</style> 